<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
	<title>系统帮助页面实例管理</title>
	<meta name="decorator" content="default"/>
	<script type="text/javascript">
		$(document).ready(function() {
			$("#contentTable tbody tr").click(function(e){
				if (!this.id) {
					return;
				}
				$("#contentTable tbody tr").removeClass("select_active");
				$(this).addClass("select_active");
				
				$("#listDiv").hide();
				var height = $(window).height() - $(header).height()*2-$("#tabHeader").height();
				$("#detailDiv").height(height);
				$("#detailDiv").html($(this).attr("detail"));
				$("#detailDiv").removeClass('hide').addClass('show'); 
			});
			$("#return").click(function(){
				if ($("#detailDiv").attr("class") == 'show'){
					$("#detailDiv").removeClass('show').addClass('hide'); 
					$("#listDiv").show();
				} else {
					window.location.href = "${ctx}";
				}
			});
		//	$("#contentTable tbody tr:first-child").click();
		});

		function page(n,s){
			$("#pageNo").val(n);
			$("#pageSize").val(s);
			$("#searchForm").submit();
        	return false;
        }
	</script>
	<style type="text/css">
		.hide{
			display: none;
			overflow:auto;
			border: 1px solid;
			border-color: #ccc;
			border-radius:5px;
		}
		.show{
			display: inline;
			overflow:auto;
			border: 1px solid;
			border-color: #ccc;
			border-radius:5px;
		}
	</style>
</head>
<body>
	<div id="tabHeader" data-role="navbar">
		<ul>
			<li><a href="${ctx}/help/systemHelp/videoHelp">视频帮助</a></li>
			<li><a class="ui-btn-active" href="#">常见问题</a></li>
		</ul>
	</div>
	<div class="icon-buttons">
		<input type="button" id="return" data-role="button" data-inline="true" data-icon="back" data-iconpos="notext" value="返回"/>
	</div>
	<div id="listDiv">
		<form:form id="searchForm" modelAttribute="systemHelpOption" action="${ctx}/help/systemHelp/optionHelp" method="post" class="middleCls">
			<input id="pageNo" name="pageNo" type="hidden" value="${page.pageNo}"/>
			<input id="pageSize" name="pageSize" type="hidden" value="${page.pageSize}"/>
			描述：<input type="search" name="summary" value="${key}"/>
			<input data-inline="true" type="submit"  value="查询"/>
		</form:form>
		<table id="contentTable" width="100%" class="ui-responsive table-stroke">
			<thead>
				<tr>
					<th width="200px">问题类型</th>
					<th>问题描述</th>
				</tr>
			</thead>
			<tbody>
				<c:forEach items="${page.list}" var="options">
					<tr id="${options.id}" detail="${options.detail}">
						<td>${options.type.name}</td>
						<td>${options.summary}</td>
					</tr>
				</c:forEach>
			</tbody>
		</table>
		<div class="pagination">${page}</div>
	</div>
	<div id="detailDiv" class="hide">
	</div>
</body>
</html>
